基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）

2024-07-14 03:04| 来源: 网络整理| 查看: 265

文章目录一、环境安装二、创建项目1、安装预设模板2、注意2、安装依赖3、运行项目4、发行项目5、注意：三、开发环境和生产环境四、其他扩展1、可以在项目根目录中配置vue.config.js文件在打包中删除console.log及注释。2、安装uview组件库

除了使用HBuilderX工具可视化搭建项目外，DCloud官方还提供了一个脚手架用于命令行搭建项目。

uni-app项目支持 uni cli和 HBuilderX cli两种脚手架工具：

uni cli：面向非HBuilderX的用户（如习惯使用vscode/webstorm的开发者），提供创建项目、编译发行等能力；在App平台，仅支持生成离线打包的wgt资源包，不支持云端打包生成apk/ipa；若需云端打包，依然需要安装HBuilderX，使用HBuilderX cli。

HBuilderX cli：面向HBuilderX用户的自动化工具，提供uni-app项目的持续集成能力；支持通过HBuilderX cli进行web打包、小程序打包、App云端打包、部署uniCloud等；但注意HBuilderX暂不支持linux平台。另外注意HBuilderX cli不基于npm，它是HBuilderX安装目录下的cli.exe。

提供有完整的cli 脚手架，可以通过 vue-cli 创建、运行、发行 uni-app 项目。

一、环境安装

全局安装vue-cli

npm i @vue/cli@4 -g

建议使用vue-cli 4.x版本，vue-cli 5.x与webpack存在冲突，会导致运行报错

二、创建项目 1、安装预设模板

使用vue-cli安装预设模板。

vue create -p dcloudio/uni-preset-vue projectName

dcloud提供了多个预设版本

//对应HBuilderX最新alpha版 vue create -p dcloudio/uni-preset-vue#alpha projectName //使用Vue3/Vite js版本 npx degit dcloudio/uni-preset-vue#vite my-vue3-project //使用Vue3/Vite ts版本 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

此时，会提示选择项目模板（使用Vue3/Vite版不会提示，目前只支持创建默认模板），初次体验建议选择 hello uni-app 项目模板。

在这里插入图片描述

2、注意

Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0

模板项目存放于 Github，由于国内网络环境问题，可能下载失败。针对此问题可以尝试如下措施：

更换网络重试，比如使用 4g 网络

在设备或路由器的网络设置中增加 DNS（如：8.8.8.8）

在设备中增加固定的 hosts（如：140.82.113.4 github.com）

2、安装依赖

打开在src文件找到mainfest.json文件将AppId填入

进入项目路径运行

npm install 3、运行项目 npm run dev:mp-weixin 4、发行项目 npm run build:mp-weixin

运行成功后会再项目中生成一个dist目录，里边存在build/mp-weixin项目，就是打包编译后微信小程序代码。可以直接在微信开发者工具中运行。

5、注意：

vue2发布到App平台时，平台参数为app-plus；vue3发布到App平台时，平台参数为app；

uni cli在App平台，仅支持生成离线打包的wgt资源包，不支持云端打包生成apk/ipa；若需云端打包，依然需要安装HBuilderX，使用HBuilderX cli。

三、开发环境和生产环境

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

在 HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境。

cli 模式下，是通行的编译环境处理方式。

if (process.env.NODE_ENV === 'development') { console.log('开发环境'); } else { console.log('生产环境'); }

HBuilderX 中敲入代码块 uEnvDev、uEnvProd 可以快速生成对应 development、production 的运行环境判定代码。

// uEnvDev if (process.env.NODE_ENV === 'development') { // TODO } // uEnvProd if (process.env.NODE_ENV === 'production') { // TODO } 四、其他扩展 1、可以在项目根目录中配置vue.config.js文件在打包中删除console.log及注释。

使用terser-webpack-plugin插件移除注释和console

如果你使用的是 webpack v5 或以上版本，你不需要安装这个插件。webpack v5 自带最新的 terser-webpack-plugin。如果使用 webpack v4，则必须安装 terser-webpack-plugin v4 的版本。

安装 terser-webpack-plugin npm install terser-webpack-plugin --save-dev 将插件添加到你的 webpack 配置文件中 const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { configureWebpack: { optimization: { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { output: { comments: false, }, // 删除console compress: { drop_console: true, pure_funcs: ['console.log'], }, }, }), ], } }, }; 2、安装uview组件库安装UI组件库 npm i uview-ui main.js引入uview import uView from "uview-ui"; Vue.use(uView); 在全局样式文件uni.scss中引入 @import 'uview-ui/theme.scss'; 在pages.json中配置easycom组件模式（打包的时候是按需引入） "easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" } 在vue.config.js中加入 module.exports = { transpileDependencies: ['uview-ui'] } 在pages下页面中使用主要按钮

【本文地址】

公司简介

联系我们